import React, { useState, useCallback } from 'react';
import { Alert, StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
import { Agenda, DateData, AgendaEntry, AgendaSchedule } from 'react-native-calendars';
import testIDs from '../testIDs';
import { TestCase, Tester, TestSuite } from '@rnoh/testerino';

export function AgendaExample3() {
    // 渲染每个日程项
    const renderItem = useCallback((reservation: AgendaEntry, isFirst: boolean) => {
        const fontSize = isFirst ? 16 : 14;
        const color = isFirst ? 'black' : '#43515c';

        return (
            <TouchableOpacity
                testID={testIDs.agenda.ITEM}
                style={[styles.item, { height: reservation.height }]}
                key={reservation.day}
            >
                <Text style={{ fontSize, color }}>{reservation.name}</Text>
            </TouchableOpacity>
        );
    }, []);

    // 渲染空白日期
    const renderEmptyDate = useCallback(() => {
        return (
            <View style={styles.emptyDate}>
                <Text>This is empty date!</Text>
            </View>
        );
    }, []);

    // 判断行是否变化（用于性能优化）
    const rowHasChanged = useCallback((r1: AgendaEntry, r2: AgendaEntry) => {
        return r1.name !== r2.name;
    }, []);

    return <View style={styles.container}>
        <Tester>
            <TestSuite name='onDayChange'>
                <TestCase itShould="test Calendar onDateChanged function"
                    assert={({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                    initialState={false}
                    tags={['C_API']}
                    arrange={({ setState }) => {
                        return <View style={{ height: 200, marginVertical: 8 }}>
                            <Agenda
                                testID={testIDs.agenda.CONTAINER}
                                items={{
                                    '2012-05-22': [{ name: 'item 1' }],
                                    '2012-05-23': [{ name: 'item 2' }],
                                    '2012-05-24': [{ name: 'item 3' }],
                                    '2012-05-25': [{ name: 'item 4' }]
                                }}
                                selected={'2012-05-22'}
                                renderItem={renderItem}
                                renderEmptyDate={renderEmptyDate}
                                rowHasChanged={rowHasChanged}
                                showClosingKnob={true}
                                onDayChange={() => {
                                    setState(true)
                                }}
                            />
                        </View>
                    }}
                >
                </TestCase>
            </TestSuite>
            <TestSuite name='onCalendarToggled'>
                <TestCase
                    itShould="test Agenda onCalendarToggled function"
                    assert={({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                    initialState={false}
                    tags={['C_API']}
                    arrange={({ setState }) => {
                        return <View style={{ height: 200, marginVertical: 8 }}>
                            <Agenda
                                testID={testIDs.agenda.CONTAINER}
                                items={{
                                    '2012-05-22': [{ name: 'item 1' }],
                                    '2012-08-23': [{ name: 'item 2' }],
                                    '2012-09-24': [{ name: 'item 3' }],
                                    '2012-11-25': [{ name: 'item 4' }]
                                }}
                                selected={'2012-05-23'}
                                renderItem={renderItem}
                                renderEmptyDate={renderEmptyDate}
                                rowHasChanged={rowHasChanged}
                                showClosingKnob={true}
                                onCalendarToggled={() => {
                                    setState(true)
                                }}
                            />
                        </View>
                    }}
                >
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='onDayChange'>
                <TestCase
            
                    itShould="test Agenda onDayChange function"
                    assert={({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                    initialState={false}
                    tags={['C_API']}
                    arrange={({ setState }) => {
                      
                        const items = {
                            '2022-07-07': [
                                { name: 'Meeting 1', height: 50 },
                                { name: 'Meeting 2', height: 50 },
                                { name: 'Meeting 3', height: 50 },
                                { name: 'Meeting 4', height: 50 },
                                { name: 'Meeting 5', height: 50 },
                                { name: 'Meeting 6', height: 50 },
                                { name: 'Meeting 7', height: 50 },
                                { name: 'Meeting 8', height: 50 },
                                { name: 'Meeting 9', height: 50 }
                            ],
                            '2022-07-08': [
                                { name: 'Conference1', height: 50 },
                                { name: 'Conference2', height: 50 },
                                { name: 'Conference3', height: 50 },
                                { name: 'Conference4', height: 50 },
                                { name: 'Conference5', height: 50 }
                            ]
                        };

                        return (
                            <View style={{ height: 400, width: '100%' }}>
                                <Agenda
                                    items={items}
                                    selected={'2022-07-07'}
                                    minDate={'2022-07-01'}
                                    maxDate={'2022-07-31'}
                                    onDayChange={(day) => {
                                        console.log("onDayChange triggered:", day);
                                        setState(true);
                                    }}
                                  
                                    renderItem={(item) => (
                                        <View style={{ padding: 10, backgroundColor: 'white', margin: 5 }}>
                                            <Text>{item.name}</Text>
                                        </View>
                                    )}
                                />
                            </View>
                        );
                    }}
                >
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='renderList'>
                <TestCase
             
                    itShould="test Agenda renderList function"
                    assert={({ expect, state }) => {
                        expect(state).to.be.true;
                    }}
                    initialState={false}
                    tags={['C_API']}
                    arrange={({ setState }) => {
                        
                        const items = {
                            '2022-07-07': [
                                { name: 'Meeting 1', height: 50 },
                                { name: 'Meeting 2', height: 50 },
                                { name: 'Meeting 3', height: 50 },
                            ],
                        };

                      
                        const MyCustomList = (listProps: any) => {
                         
                            React.useEffect(() => {
                                setState(true);
                            }, []);
                            
                            return (
                                <View style={{ padding: 10, backgroundColor: '#f0f0f0' }}>
                                    <Text>自定义列表组件</Text>
                                    <Text>日期: {listProps?.items ? Object.keys(listProps.items)[0] : '未知'}</Text>
                                    {listProps?.items && Object.values(listProps.items).flat().map((item: any, index: number) => (
                                        <View key={index} style={{ padding: 8, margin: 4, backgroundColor: 'white' }}>
                                            <Text>{item.name}</Text>
                                        </View>
                                    ))}
                                </View>
                            );
                        };

                        return (
                            <View style={{ height: 400, width: '100%' }}>
                                <Agenda
                                    items={items}
                                    selected={'2022-07-07'}
                                    minDate={'2022-07-01'}
                                    maxDate={'2022-07-31'}
                                    renderList={(listProps) => (
                                        <MyCustomList {...listProps} />
                                    )}
                                   
                                    style={{ flex: 1 }}
                                />
                            </View>
                        );
                    }}
                >
                </TestCase>
            </TestSuite>
        </Tester>
    </View >
}

// 样式保持不变
const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 1800,
    },
    item: {
        backgroundColor: 'white',
        flex: 1,
        borderRadius: 5,
        padding: 10,
        marginRight: 10,
        marginTop: 17,
    },
    emptyDate: {
        height: 15,
        flex: 1,
        paddingTop: 30,
    },
    customDay: {
        margin: 10,
        fontSize: 24,
        color: 'green',
    },
    dayItem: {
        marginLeft: 34,
    },
});